<!--
 * @Author: hongzhew
 * @Date: 2022-04-07 17:43:02
 * @LastEditors: hongzhew
 * @LastEditTime: 2022-04-07 17:44:07
 * @Description: 
-->
<!--  -->
<template>
    <div class="application">
        <!-- 应用列表表格 -->
        <y9Table
            :config="appListTableConfig"
            border
            :filterConfig="filterConfig"
            @on-change="handlerGetData"
            @on-curr-page-change="onCurrPageChange"
            @on-page-size-change="onPageSizeChange"
        >
            <template v-slot:slotSearch>
                <el-button class="global-btn-main" :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                type="primary" @click="getAppList">
                    <i class="ri-search-line"></i>
                    {{ $t('搜索') }}
                </el-button>
            </template>
            <template v-slot:slotBtns>
                <el-button @click="sortDialogConfig.show = true" :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                class="global-btn-second">
                    <i class="ri-arrow-up-down-line"></i>
                    <span> {{ $t('排序') }}</span>
                </el-button>
                <el-button class="global-btn-second" :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize" @click="handlerAppAdd">
                    <i class="ri-add-line"></i>
                    {{ $t('新增') }}
                </el-button>
                <el-button class="global-btn-second" :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                v-loading.fullscreen.lock="loading" @click="handlerDelete">
                    <i class="ri-close-line" />
                    {{ $t('删除') }}
                </el-button>
                <el-button
                    class="global-btn-second"
                    :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                    v-loading.fullscreen.lock="loading"
                    @click="handlerDisableEnable(1)"
                >
                    <i class="ri-user-follow-line"></i>
                    {{ $t('启用') }}
                </el-button>
                <el-button
                    class="global-btn-second"
                    :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                    v-loading.fullscreen.lock="loading"
                    @click="handlerDisableEnable(2)"
                >
                    <i class="ri-user-unfollow-line"></i>
                    {{ $t('禁用') }}
                </el-button>
                <!-- <el-upload 
                    accept=".json"
                    :http-request="handlerUpload"
                    style="display: inline-block;margin: 0 15px;"
                    :show-file-list="false">
                    <el-button  class="global-btn-second"  >
                        <i class="ri-file-download-line"></i>
                        导入
                    </el-button>
                </el-upload> -->
                <!-- <el-button  class="global-btn-second" >
                    <i class="ri-edit-line"></i>
                    查看修改日志
                </el-button> -->
            </template>
        </y9Table>
        <!-- 增加应用 -->
        <y9Dialog v-model:config="addDialogConfig">
            <template v-slot>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon :size="fontSizeObj.buttonSize">
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    应用名称<font color="red" style="margin-left: 4px">*</font>
                                </div>
                            </template>
                            <el-form-item label="" prop="name" :size="fontSizeObj.buttonSize">
                                <el-input v-model="ruleForm.name" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    链接地址<font color="red" style="margin-left: 4px">*</font>
                                </div>
                            </template>
                            <el-form-item label="" prop="url" :size="fontSizeObj.buttonSize">
                                <el-input v-model="ruleForm.url" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 打开方式 </div>
                            </template>
                            <el-form-item label="" prop="opentype" :size="fontSizeObj.buttonSize">
                                <el-select v-model="ruleForm.opentype" placeholder="Select" :size="fontSizeObj.buttonSize" >
                                    <el-option label="在桌面窗口打开" :value="0" :style="{ fontSize: fontSizeObj.baseFontSize }" />
                                    <el-option label="在新浏览器窗口打开" :value="1" :style="{ fontSize: fontSizeObj.baseFontSize }" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 所属类别 </div>
                            </template>
                            <el-form-item label="" prop="type" >
                                <el-select v-model="ruleForm.type" placeholder="Select" :size="fontSizeObj.buttonSize"   >
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :style="{ fontSize: fontSizeObj.baseFontSize }"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    是否可用<font color="red" style="margin-left: 4px">*</font>
                                </div>
                            </template>
                            <el-form-item label="" prop="enabled" :size="fontSizeObj.buttonSize" >
                                <el-radio-group v-model="ruleForm.enabled">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 是否显示数字 </div>
                            </template>
                            <el-form-item label="" prop="showNumber" :size="fontSizeObj.buttonSize" >
                                <el-radio-group v-model="ruleForm.showNumber">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item v-if="ruleForm.showNumber">
                            <template #label>
                                <div class="cell-item"> 获取数字地址 </div>
                            </template>
                            <el-form-item label="" prop="numberUrl" :size="fontSizeObj.buttonSize" >
                                <el-input
                                    v-model="ruleForm.numberUrl"
                                    placeholder="返回数据格式如：{count: 12345}，默认参数为tenantId、userId"
                                />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 应用图标 </div>
                            </template>
                            <el-form-item label="" prop="iconData" :size="fontSizeObj.buttonSize" >
                                <div @click="handlerIconSelect" class="icon-select">
                                    <img v-if="ruleForm.iconData" :src="ruleForm.iconData" />
                                    <span v-else class="icon-text">点击获取图标</span>
                                </div>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 角色管理的URL </div>
                            </template>
                            <el-form-item label="" prop="roleAdminUrl" :size="fontSizeObj.buttonSize" >
                                <el-input v-model="ruleForm.roleAdminUrl" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 资源管理的URL </div>
                            </template>
                            <el-form-item label="" prop="resourceAdminUrl" :size="fontSizeObj.buttonSize" >
                                <el-input v-model="ruleForm.resourceAdminUrl" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 自定义ID </div>
                            </template>
                            <el-form-item label="" prop="customId" :size="fontSizeObj.buttonSize" >
                                <el-input v-model="ruleForm.customId" />
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 排列序号 </div>
                            </template>
                            <el-form-item label="" prop="tabIndex" :size="fontSizeObj.buttonSize" >
                                <el-input v-model="ruleForm.tabIndex" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item"> 应用概述 </div>
                            </template>
                            <el-form-item label="" prop="description" :size="fontSizeObj.buttonSize" >
                                <el-input type="textarea" :rows="3" v-model="ruleForm.description" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </template>
        </y9Dialog>
        <!-- 应用图标的选择 -->
        <y9Dialog v-model:config="iconSelectDialog">
            <y9Table
                :config="iconSelectTable"
                @on-curr-page-change="handelrPageChange"
                @on-page-size-change="handlerSizeChange"
                border
                :filterConfig="filterIconConfig"
            >
                <template v-slot:slotSearch>
                    <el-button
                        class="global-btn-main"
                        type="primary"
                        :style="{ fontSize: fontSizeObj.baseFontSize }"
                 :size="fontSizeObj.buttonSize"
                        style="margin-left: 15px"
                        @click="handlerSearchIcon"
                    >
                        <i class="ri-search-line"></i>
                        {{ $t('搜索') }}
                    </el-button>
                </template>
            </y9Table>
        </y9Dialog>
        <!-- 查看 修改日志  -->
        <y9Dialog v-model:config="dialogModifyLog">
            <y9Table :config="modifyLogTableConfig" border> </y9Table>
        </y9Dialog>
        <!-- 排序 -->
        <y9Dialog v-model:config="sortDialogConfig">
            <treeSort ref="sortRef" :apiRequest="getApplicationList" :apiParams="id"></treeSort>
        </y9Dialog>
    </div>
</template>

<script lang="ts" setup>
    import type { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { useI18n } from 'vue-i18n';
    import { useSettingStore } from '@/store/modules/settingStore';
    import {
        applicationList, // 应用列表
        applicationAdd, // 增加应用
        applicationDel, // 删除应用
        applicationEnable, // 启用 应用
        applicationDisable, // 禁用 应用
        applicationInfoGet, // 应用详情
        appSaveOrder, // 应用排序
        getApplicationList, // 根据系统id获取应用列表
    } from '@/api/system/index';

    // 应用图标列表 搜索接口
    import { searchIconPageByName, getAppIconPageList } from '@/api/appIcon/index';
    import { inject, ref, watch } from 'vue';
    const { t } = useI18n();
    const settingStore = useSettingStore();
    // 注入 字体对象
    const fontSizeObj: any = inject('sizeObjInfo');  
    // import { iconList } from '../data.js';
    const options = [
        {
            value: 1,
            label: '业务协同',
        },
        {
            value: 2,
            label: '事项办理',
        },
        {
            value: 3,
            label: '数据服务',
        },
    ];

    // loading
    let loading = ref(false);

    // 接收传过来的 系统id
    const props = defineProps({
        id: String,
    });
    // 监听系统id 当发生改变时重新请求数据
    watch(
        () => props.id,
        async (new_, old_) => {
            if (new_ && new_ !== old_) {
                // console.log(new_, "应用管理");
                getAppList();
            }
        }
    );

    // 表格行内表单 搜索应用的 表单
    const formInline = ref({
        name: undefined,
    });
    // 列表 总数
    let total = ref(0);
    // 选择应用的 id数据信息
    const ids = ref([]);
    // 表格 选择框 选择后获取数据
    function handlerGetData(id, data) {
        ids.value = id;
    }
    // 请求 应用列表
    onMounted(() => {
        getAppList();
    });
    //当前页改变时触发
    function onCurrPageChange(currPage) {
        appListTableConfig.value.pageConfig.currentPage = currPage;
        getAppList();
    }
    //每页条数改变时触发
    function onPageSizeChange(pageSize) {
        appListTableConfig.value.pageConfig.pageSize = pageSize;
        getAppList();
    }
    // 应用 请求 列表 初始函数
    async function getAppList() {
        let sendData = {
            page: appListTableConfig.value.pageConfig.currentPage,
            size: appListTableConfig.value.pageConfig.pageSize,
            systemId: props.id,
            name: formInline.value.name,
        };
        const result = await applicationList(sendData);
        appListTableConfig.value.tableData = result.rows;
        appListTableConfig.value.pageConfig.total = result.total;
    }
    // 应用列表表格 配置 信息
    const appListTableConfig = ref({
        columns: [
            { title: '', type: 'selection', fixed: 'left', width: 70 },
            { title: '应用名称', key: 'name', minWidth: 120 },
            { title: '链接地址', key: 'url', minWidth: 200 },
            {
                title: '显示数字',
                render: (row) => {
                    return row.showNumber ? '是' : '否';
                },
            },
            { title: '获取数字地址', key: 'numberUrl', minWidth: 120 },
            {
                title: '所属类别',
                render: (row) => {
                    switch (row.type) {
                        case 1:
                            return '业务协同';
                        case 2:
                            return '事项办理';
                        default:
                            return '数据服务';
                    }
                },
            },
            // { title: '排列序号', key: 'tabIndex' },
            {
                title: '是否可用',
                render: (row) => {
                    return row.enabled ? '是' : '否';
                },
            },
            {
                title: '审核状态',
                key: 'checked',
                render: (row) => {
                    return row.checked ? '已审核' : '未审核';
                },
            },
            { title: '创建日期', key: 'createTime', width: 165 },
            { title: '更新日期', key: 'updateTime', width: 165 },
            {
                title: '操作',
                fixed: 'right',
                width: 100,
                showOverflowTooltip: false,
                render: (row) => {
                    return h('div', [
                        h(
                            'span',
                            {
                                onClick: async () => {
                                    const result = await applicationInfoGet(row.id);
                                    ruleForm.value = result.data;
                                    // editFlag.value = true;
                                    addDialogConfig.value.show = true;
                                    addDialogConfig.value.title = '编辑应用';
                                },
                            },
                            t('编辑')
                        ),
                    ]);
                },
            },
        ],
        tableData: [],
        pageConfig: {
            // 分页配置，false隐藏分页
            currentPage: 1, //当前页数，支持 v-model 双向绑定
            pageSize: 10, //每页显示条目个数，支持 v-model 双向绑定
            total: total.value, //总条目数
        },
    });
    let filterConfig = ref({
        showBorder: true,
        filtersValueCallBack: (filter) => {
            formInline.value = filter;
        },
        itemList: [
            {
                type: 'input',
                value: '',
                key: 'name',
                label: '应用名称',
                span: settingStore.device === 'mobile' ? 16 : 5,
                placeholder: '请输入应用名称',
            },
            {
                type: 'slot',
                slotName: 'slotSearch',
                span: settingStore.device === 'mobile' ? 8 : 6,
            },
            {
                type: 'slot',
                slotName: 'slotBtns',
                span: settingStore.device === 'mobile' ? 24 : 13,
                justify: 'flex-end',
            },
        ],
    });

    // 应用添加  图标选择
    // 搜索 和src地址 id
    let name = ref('');
    // let iconData = ref(null);
    let iconUrl = ref(null);
    // 应用图标的选择
    async function handlerIconSelect() {
        const params = {
            page: iconSelectTable.value.pageConfig.currentPage,
            rows: iconSelectTable.value.pageConfig.pageSize,
        };
        let result = await getAppIconPageList(params);
        iconSelectTable.value.tableData = result.rows;
        iconSelectTable.value.pageConfig.total = result.total;
        iconSelectDialog.value.show = true;
    }
    // 搜索 图标
    async function handlerSearchIcon() {
        const params = {
            page: iconSelectTable.value.pageConfig.currentPage,
            rows: iconSelectTable.value.pageConfig.pageSize,
            name: name.value,
        };
        let result = await searchIconPageByName(params);
        iconSelectTable.value.tableData = result.rows;
        iconSelectTable.value.pageConfig.total = result.total;
    }
    // dialog 图标选择
    let iconSelectDialog = ref({
        show: false,
        title: '选择图标',
        width: '40%',
        showFooter: false,
    });
    // 选择图标 列表 配置
    let iconSelectTable = ref({
        columns: [
            { title: '序号', type: 'index', width: '100px' },
            {
                title: '图标',
                showOverflowTooltip: false,
                key: 'iconData',
                imgConfig: {
                    type: 'base64',
                },
            },
            { title: '应用图标名称', key: 'name' },
            {
                title: '操作',
                showOverflowTooltip: false,
                render: (row) => {
                    return h(
                        'span',
                        {
                            onClick: () => {
                                // base64 转 url
                                ruleForm.value.iconData = `data:image/${row.type};base64,${row.iconData}`;
                                // console.log(iconData, "icon");
                                // console.log(row, "row");

                                iconSelectDialog.value.show = false;
                                iconUrl.value = row.path;
                                name.value = '';
                            },
                        },
                        t('选择')
                    );
                },
            },
        ],
        tableData: [],
        pageConfig: {
            currentPage: 1, //当前页数，支持 v-model 双向绑定
            pageSize: 10, //每页显示条目个数，支持 v-model 双向绑定
            total: 0, //总条目数
        },
    });
    //当前页改变时触发
    function handelrPageChange(currPage) {
        iconSelectTable.value.pageConfig.currentPage = currPage;
        handlerIconSelect();
    }
    //每页条数改变时触发
    function handlerSizeChange(pageSize) {
        iconSelectTable.value.pageConfig.pageSize = pageSize;
        handlerIconSelect();
    }
    const filterIconConfig = ref({
        filtersValueCallBack: (filter) => {
            name.value = filter.name;
        },
        itemList: [
            {
                type: 'input',
                value: '',
                key: 'name',
                label: '应用图标名称',
                span: 9,
            },
            {
                type: 'slot',
                slotName: 'slotSearch',
                span: 6,
            },
        ],
        showBorder: true,
    });

    // 应用 添加 修改表单ref
    const ruleFormRef = ref<FormInstance>();
    // 应用表单 添加 修改对象变量
    const ruleForm = ref({
        iconData: null,
        opentype: 0,
        type: 1,
        enabled: true,
        showNumber: false,
    });
    // 应用表单 规则 检验
    const rules = reactive<FormRules>({
        name: [
            {
                required: true,
                message: t('请输入应用名称'),
                trigger: 'blur',
            },
        ],
        url: [
            {
                required: true,
                message: t('请输入链接地址'),
                trigger: 'blur',
            },
        ],
    });
    // 增加 修改应用 弹框的变量配置 控制
    let addDialogConfig = ref({
        show: false,
        title: '新增应用',
        width: '40%',
        onOkLoading: true,
        onOk: (newConfig) => {
            return new Promise(async (resolve, reject) => {
                if (!ruleFormRef.value) return;
                await ruleFormRef.value.validate(async (valid, fields) => {
                    if (valid) {
                        ruleForm.value.iconUrl = iconUrl.value;
                        // console.log(ruleForm.value, 'ruleForm');

                        // Id 为null 表示当时为 添加
                        const params = {
                            systemId: props.id,
                            ...ruleForm.value,
                        };
                        const result = await applicationAdd(params);
                        ElNotification({
                            title: result.success ? t('成功') : t('失败'),
                            message: result.success ? t('操作成功') : t('操作失败'),
                            type: result.success ? 'success' : 'error',
                            duration: 2000,
                            offset: 80,
                        });
                        // 选中的数据容器 清空
                        ids.value = [];
                        // 更新成功后 表单的数据 清空
                        ruleForm.value = {
                            opentype: 0,
                            type: 1,
                            enabled: true,
                            showNumber: false,
                        };
                        iconUrl.value = '';
                        // 重新获取应用列表 数据
                        getAppList();
                        resolve();
                    } else {
                        reject();
                    }
                });
            });
        },
    });
    // 新增应用  函数事件
    function handlerAppAdd() {
        addDialogConfig.value.title = '新增应用';
        ruleForm.value = {
            opentype: 0,
            type: 1,
            enabled: true,
            showNumber: false,
        };
        iconUrl.value = '';
        // editFlag.value = false;
        addDialogConfig.value.show = true;
    }

    // 删除
    function handlerDelete() {
        if (!ids.value.length > 0) {
            ElMessage({
                message: t('请选择应用'),
                type: 'warning',
                offset: 60,
            });
        } else {
            // 选择某个应用后的 正常操作
            ElMessageBox.confirm(t(`是否删除所选应用?`), t('提示'), {
                confirmButtonText: t('确定'),
                cancelButtonText: t('取消'),
                type: 'info',
            })
                .then(async () => {
                    loading.value = true;
                    const result = await applicationDel(ids.value);
                    loading.value = false;
                    ElNotification({
                        title: t('成功'),
                        message: result.success ? t('删除成功') : t('删除失败'),
                        type: 'success',
                        duration: 2000,
                        offset: 80,
                    });
                    // 重新获取应用列表 数据
                    getAppList();
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: t('已取消删除'),
                        offset: 65,
                    });
                });
        }
    }

    // 导入
    function handlerUpload(params) {
        importAppJSON(params.file).then((res) => {
            // console.log(res, "res");
            ElNotification({
                title: t('成功'),
                message: res.msg,
                type: res.success ? 'success' : 'error',
                duration: 2000,
                offset: 80,
            });
            if (res.success) {
                // 重新获取 数据
                getAppList();
            }
        });
    }

    // 查看 修改日志 的弹框 变量 配置控制
    let dialogModifyLog = reactive({
        show: false,
        title: '查看修改日志',
        showFooter: false, //是否显示底部
    });
    // 查看修改日志 的表格 配置信息
    const modifyLogTableConfig = ref({
        columns: [
            { title: '', type: 'index' },
            { title: '操作信息', key: '' },
            { title: '描述', key: '' },
            { title: 'id', key: '' },
        ],
        tableData: [],
    });
    // 查看修改日志 事件
    // async function handlerModifyLog() {
    //     if (!ids.value.length > 0) {
    //         ElMessage({
    //             message: '请选择其中一个应用',
    //             type: 'warning',
    //             offset: 60,
    //         });
    //     } else {
    //         // 选择某个应用后的 正常操作 请求数据
    //         dialogModifyLog.show = true;
    //         // 赋值给表格数组
    //         // modifyLogTableConfig.value.tableData
    //     }
    // }

    // 禁启用 函数 事件
    function handlerDisableEnable(value: number) {
        if (!ids.value.length > 0) {
            ElMessage({
                message: t('请选择应用'),
                type: 'warning',
                offset: 60,
            });
        } else {
            // 选择某个应用后的 正常操作
            // value 为1 启用 为2 为禁用
            const boxText = value === 1 ? '启用' : '禁用';
            ElMessageBox.confirm(t(`是否${boxText}该应用?`), t('提示'), {
                confirmButtonText: t('确定'),
                cancelButtonText: t('取消'),
                type: 'info',
            })
                .then(async () => {
                    loading.value = true;
                    let result;
                    if (boxText === '禁用') {
                        // 禁用操作
                        result = await applicationDisable(ids.value);
                    } else {
                        // 启用操作
                        result = await applicationEnable(ids.value);
                    }
                    loading.value = false;
                    // 成功提示
                    ElNotification({
                        message: result.success ? t(`${boxText}成功`) : t(`${boxText}失败`),
                        type: 'success',
                        duration: 2000,
                        offset: 80,
                    });
                    // 重新获取应用列表 数据
                    getAppList();
                })
                .catch(() => {
                    loading.value = false;
                    ElMessage({
                        type: 'info',
                        message: t(`已取消${boxText}`),
                        offset: 65,
                    });
                });
        }
    }

    let sortRef = ref();
    let sortDialogConfig = ref({
        show: false,
        title: '',
        width: '40%',
        onOkLoading: true,
        onOk: (newConfig) => {
            return new Promise(async (resolve, reject) => {
                let result = { success: false, msg: '' };

                let tableData = sortRef.value.tableConfig.tableData;
                const ids = [];
                tableData.forEach((element) => {
                    ids.push(element.id);
                });
                result = await appSaveOrder(ids.toString());
                if (result.success) {
                    // 重新获取应用列表 数据
                    getAppList();
                }

                ElNotification({
                    title: result.success ? t('成功') : t('失败'),
                    message: result.msg,
                    type: result.success ? 'success' : 'error',
                    duration: 2000,
                    offset: 80,
                });
                resolve();
            });
        },
    });
</script>
<style scoped lang="scss">
    .application {
        i {
            margin-right: 5px;
        }

        .form-img {
            width: 120px;
            height: 120px;
            border: 1px solid #eee;
        }
    }

    :deep(.is-plain) {
        border: 1px solid var(--el-color-primary);
        margin-right: 10px;
        border-radius: 5px;

        i {
            margin-right: 5px;
        }
    }

    // form 表单的布局
    // :deep(.y9-dialog-overlay .y9-dialog .y9-dialog-body .y9-dialog-content[data-v-0c2bb858]) {
    //     padding: 21px 45px 21px 21px !important;
    // }
    // 图标选择
    .icon-select {
        width: 100px;
        height: 100px;
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;

        img {
            width: 100%;
            height: 100%;
        }

        // 图标文字
        .icon-text {
            color: #bbb;
            line-height: 90px;
            cursor: pointer;
        }
    }

</style>
